<template>
  <div class="header-box">
    <div class="header-left">
      <NuxtLink to="/">
        <div style="display: flex;align-items: flex-end;">
          <NuxtLogo style="width: 30px;height: 30px;" />
          <span style="margin-left: 4px;">Nuxt</span>
        </div>
      </NuxtLink>
    </div>
    <div class="header-center">
      <Dropdown v-for="(item, index) in list" :key="index" :data="item"></Dropdown>
    </div>
    <div class="header-right">
      <SvgIcon iconClass="github" style="width: 30px;height: 30px;"></SvgIcon>
      <span @click="handleTheme">
        <SvgIcon :iconClass="theme" :key="theme" style="width: 30px;height: 30px;"></SvgIcon>
      </span>
    </div>
  </div>
</template>

<script>
import NuxtLogo from './NuxtLogo.vue';
import Dropdown from './Dropdown.vue';
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  data() {
    return {
      list: [
        {
          name: "Learn",
          path: '/explore',
          children: [
            { name: '介绍', path: '/explore/des' },
            { name: '安装', path: '/explore/install' },
            { name: '使用', path: '/explore/use' },
          ]
        },
        {
          name: "About",
          path: '/about'
        }
      ],
      theme: 'system-theme'
    }
  },
  computed: {
    // theme() {
    //   return this.$store.state.theme.theme
    // },
    // ...mapState({
    //   theme: state => state.theme.theme
    // })
  },
  // computed: mapState({
  //   theme: state => state.theme.theme
  // }),
  created() {
    if (process.browser) {
      this.initTheme()
    }
  },
  methods: {
    initTheme() {
      if (window.matchMedia) {
        let themeMedia = window.matchMedia("(prefers-color-scheme: dark)");
        this.changeTheme(themeMedia.matches ? 'dark' : 'light')
        themeMedia.onchange = (e) => {
          this.changeTheme(e.matches ? 'dark' : 'light')
        }
      }
    },
    handleTheme() {
      if (this.theme === 'system-theme') {
        this.theme = 'light'
        this.changeTheme('light')
      } else if (this.theme === 'light') {
        this.theme = 'dark'
        this.changeTheme('dark')
      } else if (this.theme === 'dark') {
        this.theme = 'system-theme'
        this.changeTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light')
      }
    },
    ...mapMutations({
      changeTheme: 'theme/changeTheme'
    }),
    ...mapActions({
      changeThemeAction: 'theme/changeThemeAction'
    })
  },
}
</script>
